Skip to main content

Examples

Examples

Here are a few examples showcasing the usage of the Calculator Widget in different scenarios:

Basic Calculator Widget​

import React from 'react';
import { Calculator } from 'widgetsy';

function App() {
  return (
    <div
    style={{width:"50"}}
    >
      <Calculator />
    </div>
  );
}

export default App;

In this example, a basic Calculator Widget is rendered without any customizations. The widget will display the current time using the default styles.

Customized Calculator Widget​

import React from 'react';
import { Calculator } from 'widgetsy';

function App() {
  return (
    <div>
      <Calculator
        backgroundColor={[
          { color: '#003973', stop: 0 },
          { color: '#a6a679', stop: 100 },
        ]}
        rotation={45}
        primaryFont="#000000"
        primaryColor="#FFFFFF"
      />
    </div>
  );
}

In this example, the Calculator Widget is customized with a background gradient, rotation of 45 degrees, white primary font color, and black primary color for UI elements.

Calculator Widget with Theme​

import React from 'react';
import { Calculator } from 'widgetsy';

function App() {
  return (
    <div>
      <Calculator
        theme={1}
        rotation={45}
        primaryFont="#000000"
        primaryColor="#FFFFFF"
      />
    </div>
  );
}

In this example, the Calculator Widget is customized with a background gradient, rotation of 45 degrees, white primary font color, and black primary color for UI elements.

Feel free to customize the Calculator Widget's props according to your specific requirements and UI design.